<template>
  <div>
    <div class="title">{{title}}</div>
    <div class="content">
      <div style="padding-top:50px" v-for="item in info" :key="item.id">
        <div>{{item.questionId}}.{{item.questionName}}</div>
        <div style="padding-top: 10px">
          正确答案：<span style="color:green">{{item.rightAnswer}}</span>、学员答案：<span class="color" :class="{'colorChange': item.answerContent == item.rightAnswer}">{{item.answerContent}}</span>
        </div>
        <div class="selStyle" v-for="item2 in item.questionOption" :key="item2.id">
          {{item2}}
        </div>
      </div>
    </div>
    <div class="footer">
      <el-button @click="back()">返回</el-button>
    </div>
  </div>
</template>

<script>
import { answerDetail } from "@/api/system/user";
export default {
  components: {
   
  },
  data() {
    return {
      info: '',
      title: '',
    }
  },
  created() {
  },
  mounted(){
    this.init(this.$route.query.id)
  },
  methods: {
    init(id) {
      answerDetail(id).then(res => {
        if (res.code == 200) {
          this.info = res.data.question
          this.title = res.data.testPaperInfo.testPaperName
        } else {
          this.$message({ message: res.msg, type: "error" });
        }
      });
    },
    back() {
      this.$router.push('answerList')
    },
  }
}
</script>
<style scoped>
  .container {
    padding-left: 26px;
    padding-right: 24px;
    padding-top: 24px;
  }
  .row {
    display:flex;
    padding-bottom: 20px;
  }
  .line {
    height: 1px;
    background: #DCDFE6;
    width: 100%;
    margin-top: 6px;
    margin-bottom: 20px;
  }
  .row .font {
    width: 200px;
    text-align: right;
    margin-right: 20px;
  }
  .row .fonts {
    width: 300px;
    text-align: right;
    margin-right: 20px;
  }
  .flex_row {
    display: flex;
  }
  .footer {
    width: 540px;
    text-align: right;
    margin-top: 40px
  }
  .title {
    width: 400px;
    margin: 0 auto;
    padding-top: 30px;
  }
  .content {
    width: 1200px;
    margin: 0 auto;
  }
  .selStyle {
    line-height: 40px;
    margin-left: 16px;
  }
  .footer {
    text-align: center;
  }
  .color {
    color: red
  }
  .colorChange {
    color: green
  }
</style>
